<template>
    <el-button class="mt-4" style="" @click="dialogVisible=true" type="success">新增</el-button>
    <el-input placeholder="按学号搜索" v-model="idd" type="text" style="width: 140px"/>
        <el-button type="primary" @click="searchbyid">搜索</el-button>
    <el-table :data="datas.slice((pageNum-1)*pageSize,pageNum*pageSize)" style="width: 100%" max-height="250" border>
        <el-table-column fixed label="序号" width="200">
            <template #default="scopes">
                {{ scopes.$index+1 }}
            </template>
        </el-table-column>
        <el-table-column fixed prop="id" label="学号" width="200" />
        <el-table-column fixed prop="name" label="姓名" width="200" />
        <el-table-column prop="college" label="学院" width="200" />
      <el-table-column prop="grade" label="年级" width="200" />
        <el-table-column prop="major" label="专业" width="200" />
        <el-table-column prop="classi" label="班级" width="200" />
        <el-table-column prop="tele" label="联系电话" width="200" />
        <el-table-column fixed="right" label="操作" width="150">
            <template #default="scope">
                <div v-if="store.auth.role!='学生'">
                <el-button
                        link
                        type="primary"
                        size="small"
                        @click.prevent="deleteRow(scope.$index)"
                >
                    删除
                </el-button>
                <el-button
                        link
                        type="primary"
                        size="small"
                        @click.prevent="getStuByid(scope.$index)"
                >
                    修改
                </el-button>
                </div>
                <div v-if="store.auth.role=='学生'">无操作权限</div>
            </template>
        </el-table-column>
    </el-table>
    <div class="pagination">
        <el-pagination
                background
                layout="sizes,prev,pager,next,jumper,->,total"
                :page-size.sync="pageSize"
                :current-page.sync="pageNum"
                :page-sizes="[2,5,8,10,15]"
                :total="totals"
                :hide-on-single-page="true"
                @current-change="getList"
                @size-change="getList1"
        />
    </div>
    <div>{{test}}</div>
    <el-dialog title="填写信息" v-model="dialogVisible">
        <el-form :model="stu">
            <el-input placeholder="学号" v-model="stu.id" type="text" />
            <el-input placeholder="姓名" v-model="stu.name" type="text" />
            <el-input placeholder="学院" v-model="stu.college" type="text" />
            <el-input placeholder="专业" v-model="stu.major" type="text" />
            <el-input placeholder="班级" v-model="stu.classi" type="text" />
            <el-input placeholder="联系电话" v-model="stu.tele" type="text" />
            <el-button type="warning" @click="dialogVisible=false">取消</el-button>
            <el-button type="primary" @click="add">确认</el-button>
        </el-form>
    </el-dialog>
    <el-dialog title="修改信息" v-model="dialogVisibles">
        <el-form :model="stus">
            <el-input placeholder="学号" v-model="stus.id" type="text" disabled/>
            <el-input placeholder="姓名" v-model="stus.name" type="text" />
            <el-input placeholder="学院" v-model="stus.college" type="text" />
            <el-input placeholder="专业" v-model="stus.major" type="text" />
            <el-input placeholder="班级" v-model="stus.classi" type="text" />
            <el-input placeholder="联系电话" v-model="stus.tele" type="text" />
            <el-button type="warning" @click="dialogVisibles=false">取消</el-button>
            <el-button type="primary" @click="adds">确认</el-button>
        </el-form>
    </el-dialog>

</template>

<script setup>
import { ref,onMounted } from 'vue'
import {ElMessage} from 'element-plus'
import { get,post } from '@/utils/request.js'
import { reactive } from 'vue'
import {userStore} from '@/stores/counter.js'

const datas=ref([])
const dialogVisible=ref(false)
const dialogVisibles=ref(false)
const num=ref('')
const idd=ref('')
const store=userStore()
const types=ref('')
const totals=ref('')
const pageNum=ref(1)
const pageSize=ref(2)
const test=ref('')

const stu = reactive({
id:'',
name:'',
college:'',
major:'',
classi:'',
tele:''
})

const stus = reactive({
id:'',
name:'',
college:'',
major:'',
classi:'',
tele:''
})


  get('/getStuInfo',(message)=>{
  let bbb=[]
    if(store.auth.role=='管理员'){
    datas.value = message
    totals.value=message.length
    }else if(store.auth.role=='辅导员'){
    post('/teacher/getTeaByName',{name:store.auth.user},(messages)=>{
    bbb = message.filter(item=>item.grade===messages.grade)
    datas.value=bbb.filter(item=>item.college===messages.college)
     totals.value=datas.value.length
    },(messages)=>{
    ElMessage.warning(messages)
    })
    }else{
    datas.value = message.filter(item=> item.name===store.auth.user)
    totals.value=datas.value.length
    }
    },(message)=>{
    ElMessage.warning(message)
    })



const deleteRow = (index) => {
post('/deletestu',{
id:datas.value[index].id
},(message)=>{
ElMessage.success(message)
num.value=index
datas.value.splice(index, 1)
},(message)=>{
ElMessage.warning(message)
})
}

const add=()=>{
post('/addstu',{
id:stu.id,
name:stu.name,
college:stu.college,
major:stu.major,
classi:stu.classi,
tele:stu.tele
},(message)=>{
ElMessage.success(message)
dialogVisible.value = false
datas.value.push({
id:stu.id,
name:stu.name,
college:stu.college,
major:stu.major,
classi:stu.classi,
tele:stu.tele
  })
stu.id='',
stu.name='',
college='',
stu.major='',
stu.classi='',
stu.tele=''
},(message)=>{
ElMessage.warning(message)
dialogVisible.value = false
stu.id='',
stu.name='',
college='',
stu.major='',
stu.classi='',
stu.tele=''
})
}

const getStuByid=(index)=>{
post('/getstubyid',{
id:datas.value[index].id
},(message)=>{
dialogVisibles.value=true
stus.id=message.id
stus.name=message.name
stus.college=message.college
stus.major=message.major
stus.classi=message.classi
stus.tele=message.tele
},(message)=>{
ElMessage.warning(message)
})
}

const searchbyid=()=>{
post('/getstubyid',{
id:idd.value
},(message)=>{
datas.value = []
datas.value.push(message)
idd.value=''
},(message)=>{
idd.value=''
ElMessage.warning(message)
})
}

const adds=()=>{
post('/updatestu',{
id:stus.id,
name:stus.name,
college:stus.college,
major:stus.major,
classi:stus.classi,
tele:stus.tele
},(message)=>{
ElMessage.success(message)
dialogVisibles.value = false
datas.value.splice(num,1,stus)
},(message)=>{
ElMessage.warning(message)
dialogVisibles.value = false
})
}

const getList=(pageNums)=>{
pageNum.value=pageNums
}

const getList1=(pageSizes)=>{
pageSize.value=pageSizes
}


</script>
